HTML உள்ளீட்டு வகைகள்
இந்த அத்தியாயம் HTML <input> உறுப்புக்கான வெவ்வேறு வகைகளை விவரிக்கிறது.
உதவிக்குறிப்பு:
type பண்புக்கூறின் இயல்புநிலை மதிப்பு "text" ஆகும்.
HTML இல் பயன்படுத்தக்கூடிய வெவ்வேறு உள்ளீட்டு வகைகள்:
உள்ளீட்டு வகை: Text
<input type="text"> ஒரு ஒற்றை வரி உரை உள்ளீட்டுப் புலத்தை வரையறுக்கிறது:
எடுத்துக்காட்டு
<form>
<label for="fname">First name:</label><br>
<input type="text" id="fname" name="fname"><br>
<label for="lname">Last name:</label><br>
<input type="text" id="lname" name="lname">
</form>
உள்ளீட்டு வகை: Password
<input type="password"> ஒரு கடவுச்சொல் புலத்தை வரையறுக்கிறது:
எடுத்துக்காட்டு
<form>
<label for="username">Username:</label><br>
<input type="text" id="username" name="username"><br>
<label for="pwd">Password:</label><br>
<input type="password" id="pwd" name="pwd">
</form>
கடவுச்சொல் புலத்தில் உள்ள எழுத்துக்கள் மறைக்கப்பட்டு (நட்சத்திரங்கள் அல்லது வட்டங்களாகக் காட்டப்படும்).
உள்ளீட்டு வகை: Submit
<input type="submit"> படிவத் தரவை படிவ-கையாளுநருக்குச் சமர்ப்பிப்பதற்கான ஒரு பொத்தானை வரையறுக்கிறது.
படிவ-கையாளுநர் பொதுவாக உள்ளீட்டுத் தரவைச் செயலாக்குவதற்கான ஸ்கிரிப்ட் கொண்ட ஒரு சர்வர் பக்கமாகும்.
படிவ-கையாளுநர் படிவத்தின் action பண்புக்கூறில் குறிப்பிடப்பட்டுள்ளது:
எடுத்துக்காட்டு
<form action="/action_page.php">
<label for="fname">First name:</label><br>
<input type="text" id="fname" name="fname" value="John"><br>
<label for="lname">Last name:</label><br>
<input type="text" id="lname" name="lname" value="Doe"><br><br>
<input type="submit" value="Submit">
</form>
நீங்கள் submit பொத்தானின் value பண்புக்கூறைத் தவிர்த்தால், பொத்தானுக்கு இயல்புநிலை உரை கிடைக்கும்:
<form action="/action_page.php">
<label for="fname">First name:</label><br>
<input type="text" id="fname" name="fname" value="John"><br>
<label for="lname">Last name:</label><br>
<input type="text" id="lname" name="lname" value="Doe"><br><br>
<input type="submit">
</form>
உள்ளீட்டு வகை: Reset
<input type="reset"> அனைத்து படிவ மதிப்புகளையும் அவற்றின் இயல்புநிலை மதிப்புகளுக்கு மீட்டமைக்கும் ஒரு மீட்டமைப்பு பொத்தானை வரையறுக்கிறது:
எடுத்துக்காட்டு
<form action="/action_page.php">
<label for="fname">First name:</label><br>
<input type="text" id="fname" name="fname" value="John"><br>
<label for="lname">Last name:</label><br>
<input type="text" id="lname" name="lname" value="Doe"><br><br>
<input type="submit" value="Submit">
<input type="reset" value="Reset">
</form>
குறிப்பு:
நீங்கள் உள்ளீட்டு மதிப்புகளை மாற்றிவிட்டு "Reset" பொத்தானைக் கிளிக் செய்தால், படிவ-தரவு இயல்புநிலை மதிப்புகளுக்கு மீட்டமைக்கப்படும்.
உள்ளீட்டு வகை: Radio
<input type="radio"> ஒரு ரேடியோ பொத்தானை வரையறுக்கிறது.
ரேடியோ பொத்தான்கள் ஒரு பயனரை வரையறுக்கப்பட்ட எண்ணிக்கையிலான தேர்வுகளில் ஒன்றை மட்டுமே தேர்ந்தெடுக்க அனுமதிக்கின்றன:
எடுத்துக்காட்டு
<p>Choose your favorite Web language:</p>
<form>
<input type="radio" id="html" name="fav_language" value="HTML">
<label for="html">HTML</label><br>
<input type="radio" id="css" name="fav_language" value="CSS">
<label for="css">CSS</label><br>
<input type="radio" id="javascript" name="fav_language" value="JavaScript">
<label for="javascript">JavaScript</label>
</form>
Choose your favorite Web language:
உள்ளீட்டு வகை: Checkbox
<input type="checkbox"> ஒரு சரிபார்ப்புப் பெட்டியை வரையறுக்கிறது.
சரிபார்ப்புப் பெட்டிகள் ஒரு பயனரை வரையறுக்கப்பட்ட எண்ணிக்கையிலான தேர்வுகளில் பூஜ்ஜியம் அல்லது அதற்கு மேற்பட்ட விருப்பங்களைத் தேர்ந்தெடுக்க அனுமதிக்கின்றன.
எடுத்துக்காட்டு
<form>
<input type="checkbox" id="vehicle1" name="vehicle1" value="Bike">
<label for="vehicle1"> I have a bike</label><br>
<input type="checkbox" id="vehicle2" name="vehicle2" value="Car">
<label for="vehicle2"> I have a car</label><br>
<input type="checkbox" id="vehicle3" name="vehicle3" value="Boat">
<label for="vehicle3"> I have a boat</label>
</form>
உள்ளீட்டு வகை: Button
<input type="button"> ஒரு பொத்தானை வரையறுக்கிறது:
எடுத்துக்காட்டு
<input type="button" onclick="alert('Hello World!')" value="Click Me!">
பிற உள்ளீட்டு வகைகள்
type="color"
நிறத்தைத் தேர்ந்தெடுக்க பயன்படுகிறது
<input type="color" id="favcolor" name="favcolor">
type="date"
தேதியைத் தேர்ந்தெடுக்க பயன்படுகிறது
<input type="date" id="birthday" name="birthday">
type="email"
மின்னஞ்சல் முகவரிக்கு பயன்படுகிறது
<input type="email" id="email" name="email">
type="file"
கோப்புப் பதிவேற்றத்திற்கு பயன்படுகிறது
<input type="file" id="myfile" name="myfile">
type="number"
எண் மதிப்புகளுக்கு பயன்படுகிறது
<input type="number" id="quantity" name="quantity" min="1" max="5">
type="range"
ஸ்லைடர் கட்டுப்பாட்டிற்கு பயன்படுகிறது
<input type="range" id="vol" name="vol" min="0" max="50">
type="search"
தேடல் புலங்களுக்கு பயன்படுகிறது
<input type="search" id="gsearch" name="gsearch">
type="tel"
தொலைபேசி எண்களுக்கு பயன்படுகிறது
<input type="tel" id="phone" name="phone">
உள்ளீட்டு கட்டுப்பாடுகள்
சில பொதுவான உள்ளீட்டு கட்டுப்பாடுகளின் பட்டியல் இங்கே:
| பண்புக்கூறு | விளக்கம் |
|---|---|
| checked | பக்கம் ஏற்றப்படும் போது ஒரு உள்ளீட்டுப் புலம் முன்-தேர்ந்தெடுக்கப்பட வேண்டும் என்பதைக் குறிப்பிடுகிறது (type="checkbox" அல்லது type="radio" க்கு) |
| disabled | ஒரு உள்ளீட்டுப் புலம் முடக்கப்பட வேண்டும் என்பதைக் குறிப்பிடுகிறது |
| max | ஒரு உள்ளீட்டுப் புலத்திற்கான அதிகபட்ச மதிப்பைக் குறிப்பிடுகிறது |
| maxlength | ஒரு உள்ளீட்டுப் புலத்திற்கான அதிகபட்ச எழுத்துகளின் எண்ணிக்கையைக் குறிப்பிடுகிறது |
| min | ஒரு உள்ளீட்டுப் புலத்திற்கான குறைந்தபட்ச மதிப்பைக் குறிப்பிடுகிறது |
| pattern | உள்ளீட்டு மதிப்பைச் சரிபார்க்க ஒரு வழக்கமான வெளிப்பாட்டைக் குறிப்பிடுகிறது |
| readonly | ஒரு உள்ளீட்டுப் புலம் படிக்க மட்டுமே (மாற்ற முடியாது) என்பதைக் குறிப்பிடுகிறது |
| required | ஒரு உள்ளீட்டுப் புலம் தேவைப்படுகிறது (நிரப்பப்பட வேண்டும்) என்பதைக் குறிப்பிடுகிறது |
| size | ஒரு உள்ளீட்டுப் புலத்தின் அகலத்தை (எழுத்துகளில்) குறிப்பிடுகிறது |
| step | ஒரு உள்ளீட்டுப் புலத்திற்கான சட்டப்பூர்வ எண் இடைவெளிகளைக் குறிப்பிடுகிறது |
| value | ஒரு உள்ளீட்டுப் புலத்திற்கான இயல்புநிலை மதிப்பைக் குறிப்பிடுகிறது |
கூடுதல் கற்றல்:
நீங்கள் அடுத்த அத்தியாயத்தில் உள்ளீட்டு கட்டுப்பாடுகளைப் பற்றி மேலும் அறிவீர்கள்.
எடுத்துக்காட்டு
பின்வரும் எடுத்துக்காட்டு 0 முதல் 100 வரையிலான மதிப்பை உள்ளிடலாம், 10 இன் படிகளில். இயல்புநிலை மதிப்பு 30:
<form>
<label for="quantity">Quantity:</label>
<input type="number" id="quantity" name="quantity" min="0" max="100" step="10" value="30">
</form>
பயிற்சி
INPUT உறுப்பின் type பண்புக்கூறின் இயல்புநிலை மதிப்பு என்ன?
HTML உள்ளீட்டு வகை பண்புக்கூறு
| குறிச்சொல் | விளக்கம் |
|---|---|
| <input type=""> | காண்பிக்க வேண்டிய உள்ளீட்டு வகையைக் குறிப்பிடுகிறது |
முக்கிய புள்ளிகள்:
- type பண்புக்கூறு உள்ளீட்டு கட்டுப்பாட்டின் வகையை தீர்மானிக்கிறது
- இயல்புநிலை மதிப்பு "text" ஆகும்
- வெவ்வேறு type மதிப்புகள் வெவ்வேறு உள்ளீட்டு கட்டுப்பாடுகளை உருவாக்குகின்றன
- ஒவ்வொரு type மதிப்பும் குறிப்பிட்ட பயன்பாட்டு வழக்குகளுக்கு ஏற்றது